<template>
  <el-form ref="form" :model="form" :rules="rules" label-width="110px" size="small" :disabled="clickFlag == 'view'">
    <!--大模型类型-->
    <el-form-item :label="$t('largeModel.modelType')+':'" prop="modelType" >
      <el-radio-group v-model="form.modelType" :disabled="clickFlag == 'edit' || clickFlag == 'view'">
        <el-radio label="1">{{$t('largeModel.industryLargeModel')}}</el-radio> <!--行业大模型-->
        <el-radio label="2">{{$t('largeModel.generalLargeModel')}}</el-radio> <!--通用大模型-->
      </el-radio-group>
    </el-form-item>

    <!--大模型名称-->
    <el-form-item :label="$t('largeModel.largeModelName')+':'" prop="modelName">
      <el-input
        maxlength="30"
        v-model="form.modelName"
        show-word-limit
        :placeholder="$t('largeModel.inputLargeModelNameTip')"
      >
      </el-input>
    </el-form-item>

   <!--API KEY-->
<!--    <el-form-item label="API KEY：" prop="apiKey" v-if="form.modelType == '2'">-->
<!--      <el-input-->
<!--        maxlength="30"-->
<!--        v-model="form.apiKey"-->
<!--        show-word-limit-->
<!--        :placeholder="$t('largeModel.inputApiKeyTip')"-->
<!--      >-->
<!--      </el-input>-->
<!--    </el-form-item>-->
    <!--接口地址-->
    <el-form-item :label="$t('largeModel.interfaceAddress')+':'" prop="interfaceAddress">
<!--      <el-input-->
<!--        maxlength="100"-->
<!--        v-model="form.interfaceAddress"-->
<!--        show-word-limit-->
<!--        :placeholder="$t('largeModel.inputInterfaceAddressTip')"-->
<!--      >-->
<!--        -->
<!--      </el-input>-->
      <el-input
        placeholder="172.20.0.44:80/api/chat"
        v-model="form.interfaceAddress"
        maxlength="100"
        show-word-limit
        class="input-with-select"
        @input="handlerInput"
      >
        <el-select v-model="form.agreement" slot="prepend">
          <el-option label="http" value="http"></el-option>
          <el-option label="https" value="https"></el-option>
          <el-option label="websocket" value="websocket"></el-option>
        </el-select>
      </el-input>
    </el-form-item>

    <!--生成模式支持-->
    <el-form-item :label="$t('largeModel.mode')+':'" prop="mode">
      <el-checkbox-group v-model="form.mode">
        <el-checkbox label="2">
          {{$t('largeModel.precision')}}
          <el-tooltip class="item" effect="dark" :content="$t('largeModel.precisionTips')" placement="top">
            <i class="el-icon-warning-outline"></i>
          </el-tooltip>
        </el-checkbox>  <!--精确模式-->
        <el-checkbox label="1">
          {{$t('largeModel.commonMode')}}
          <el-tooltip class="item" effect="dark" :content="$t('largeModel.commonModeTips')" placement="top">
            <i class="el-icon-warning-outline"></i>
          </el-tooltip>
        </el-checkbox>  <!--普通模式-->
        <el-checkbox label="3">
          {{$t('largeModel.extension')}}
          <el-tooltip class="item" effect="dark" :content="$t('largeModel.extensionTips')" placement="top">
            <i class="el-icon-warning-outline"></i>
          </el-tooltip>
        </el-checkbox>  <!--拓展模式-->
      </el-checkbox-group>
    </el-form-item >

    <!--头部信息-->
    <el-form-item label-width="0">
      <PlugCrud
        :personalityDisplay="false"
        :title="$t('largeModel.headerInformation')"
        :requstData="headerArr"
        @chilReData="preGetData"
        :hasInitialization="hasInitialization"
        :clickFlag="clickFlag"
      ></PlugCrud>
    </el-form-item>

    <!--能力参数-->
    <el-form-item label-width="0">
      <ModelPlug
        :personalityDisplay="false"
        :title="$t('kwCompetence.ability')"
        :modelData="requestArr"
        @chilReData="modelPreGetData"
        :hasInitialization="hasInitialization"
        :clickFlag="clickFlag"
      ></ModelPlug>
    </el-form-item>

    <!--图标-->
    <el-form-item :label="$t('largeModel.cover')+':'" prop="thumbnail" label-width="50px">
      <el-upload
        class="upload-demo"
        ref="uploadThumbnail"
        accept=".jpg,.png"
        :data="iconUploadData"
        :file-list="iconFileList"
        :action="iconAction"
        limit="1"
        :show-file-list="false"
        :before-upload="iconBeforeUpload"
        :on-success="iconHandlerSuccess"
      >
        <el-button size="small" type="primary">{{$t('aiccCommon.upload')}}</el-button>
      </el-upload>
      <img :src="imgUrl" style="width: 120px;height: 120px;margin-top: 10px" v-if="form.thumbnail != ''"/>
    </el-form-item>

    <!--简介-->
    <el-form-item :label="$t('largeModel.introduction')+':'" prop="introduction" label-width="50px">
      <el-input
        maxlength="300"
        v-model="form.introduction"
        show-word-limit
        :rows="4"
        :placeholder="$t('largeModel.inputIntroductionTip')"
        type="textarea"
      >
      </el-input>
    </el-form-item>
  </el-form>
</template>

<script>
import PlugCrud from "@/components/plugCrud/index";
import ModelPlug from "@/components/plugCrud/modelndex";
import {baseURL} from "@/api/common";
import serviceList from "@/config/serviceList";
export default {
  components:{
    PlugCrud,
    ModelPlug
  },
  data(){
    return{
      form:{
        modelType:'1',  //大模型类型
        modelName:'',   //大模型名称
        interfaceAddress:'', //接口地址
        thumbnail:'', //图标的信息
        introduction:'', //简介
        isDefault:'0', //1默认 0非默认 一般新增的都是非默认的,具体看编辑时的赋值
        id:'',
        apiKey:'',
        mode:[],  //生成模式
        agreement:'http',
      },
      iconAction: `${baseURL}api/${serviceList.file}/miniofile/upload`,
      iconFileList: [],
      iconUploadData: {
        fromSystemName: "aicc"
      },
      requstData:[],
      headerArr:[],
      requestArr:[],
      hasInitialization:[],
      rules:{
        modelName:[
          { required: true, message: this.$t('largeModel.inputLargeModelNameTip'), trigger: 'blur' },
        ],

        // mode:[
        //   { required: true, message: this.$t('largeModel.selectModeTip'), trigger: ['change','blur'] },
        // ],

        interfaceAddress:[
          { required: true, message: this.$t('largeModel.inputInterfaceAddressTip'), trigger: 'blur' },
          {
            pattern:/^[^\u4e00-\u9fa5]+$/,
            message: this.$t('largeModel.inputInterfaceAddressErrorTip'),
            trigger: ['blur','change']
          },
        ],

        // thumbnail:[
        //   { required: true, message: this.$t('largeModel.uploadIconTip'), trigger: ['blur','change'] },
        // ],

        // apiKey:[
        //   { required: true, message: this.$t('largeModel.inputApiKeyTip'), trigger: 'blur' },
        //   {
        //     pattern: /^[A-Za-z0-9_\-\s]+$/,
        //     message: this.$t('aiccCommon.onlyAllowLetterAndNumberAndUnderlineAndHorizontalLine'),
        //     trigger: ['blur','change']
        //   }
        // ],

        // introduction:[
        //   { required: true, message: this.$t('largeModel.inputIntroductionTip'), trigger: 'blur' },
        // ],
      },
    }
  },

  computed:{
    imgUrl(){
      return `${baseURL.slice(0,-1)}${this.form.thumbnail}`
    },
  },

  props:{
    cur:{
      type:Object,
      default:()=>{
        return {}
      }
    },
    clickFlag:{
      type:String,
      default:''
    }
  },

  mounted() {
    if (this.cur.id){
      const Data = this.cur;
      this.form = {
        modelType:Data.type == 1 ? '1' : '2',  //大模型类型
        modelName:Data.name,   //大模型名称
        interfaceAddress:Data.interfaceAddress, //接口地址
        thumbnail:Data.logo, //图标的信息
        introduction:Data.remark, //简介
        isDefault:Data.isDefault, //1默认 0非默认 一般新增的都是非默认的,具体看编辑时的赋值
        id:Data.id,
        // apiKey:Data.apiKey,
        mode:Data.pattern.split(","),
        agreement:Data.agreement,
      };

      if (Data.content){
        const JSONObj = JSON.parse(Data.content);
        this.headerArr = JSONObj.header;
        this.requestArr = JSONObj.request;
      }
    }
  },

  methods:{

    handlerInput(){
      var rex = /^(http|https|websocket):\/\//i;
      if(rex.test(this.form.interfaceAddress)){
        this.$message.warning('请勿重复输入协议号');
        this.form.interfaceAddress = this.form.interfaceAddress.replace(/^(http|https|websocket):\/\//i,'')
      }
    },

    preGetData(val){
      console.log(val,'头部')
      this.headerArr = val.requstData;
    },

    modelPreGetData(val){
      console.log(val,'能力参数')
      this.requestArr = val.modelData;
    },

    iconBeforeUpload(file){
      if (file.size/1024/1024>20){
        this.$message.error(this.$t('workTemplate.uploadCommentLimit'));
        return false
      }

      if (file.type != 'image/jpeg' && file.type != 'image/png' && file.type != 'image/jpg'){
        this.$message.error(this.$t('multiwheelLang.onlyUploadJpgOrPng'));
        return false
      }
    },

    iconHandlerSuccess(response) {
      if (response.code == 200) {
        this.form.thumbnail = response.data.newFileName;
        this.form.thumbnailName = response.data.objectName;
        this.iconFileList = {name: this.form.thumbnailName}
        this.$refs.uploadThumbnail.clearFiles();
      } else {
        this.$refs.uploadThumbnail.clearFiles();
      }

    },
  },
}
</script>

<style scoped lang="scss">
/deep/ .el-select .el-input {
  width: 110px;
}
/deep/ .input-with-select .el-input-group__prepend {
  background-color: #fff;
}
</style>
